<template>
    <view class="myOrder">
        <view class="card">
            <view class="card_head flex_b">
                <view class="card_head_l">客户信息</view>
            </view>
            <view class="card_content">
                <view class="row flex_l">
                    <view class="img flex_c">
                        <image src="@/static/images/customerPage/icon_time.png" />
                    </view>
                    <view style="color: #222222;">{{ (orderDetail.workDate) }}</view>
                </view>
                <view class="row flex_l" style="margin-top: 20rpx;" @click="openMap">
                    <view class="img flex_c">
                        <image src="@/static/images/workerPage/navigation.png" />
                    </view>
                    <view style="color: #222222;font-size: 30rpx;font-weight: 700;">{{ orderDetail.workPlace }} {{ orderDetail.address }}</view>
                </view>
                <view class="row flex_l" style="margin-top: 12rpx;" @click="openPhone()">
                    <view class="img flex_c">
                        <image src="@/static/images/workerPage/phone.png" />
                    </view>
                    <view style="color: #222222;font-size: 26rpx;color: #888888;">{{ orderDetail.customerMobile }}(点击联系客户)</view>
                </view>
            </view>
        </view>
        <view class="card" v-if="!isIdNumber">
            <view class="card_head flex_b">
                <view class="card_head_l">完善身份信息</view>
            </view>
            <view class="card_content">
                <view class="describe">
                    尊敬的师傅，您好！
                    <br>
                    为了确保您在平台上的每一次服务都能享有全面的安全保障，我们特为您投保了专属的保险计划。为了顺利完成保险信息的录入，保障您的合法权益，在您首次接单时，需要您提供一下姓名身份证号码进行验证与登记。
                    <br>
                    同时，我们会用您的身份信息为您在平台开通个人钱包,用于后续的资金结算，请务必填写真实信息。
                    <br>
                    请您放心，我们承诺对您的个人信息实行最严格的保密措施，绝不会泄露给第三方。您的安全，是我们最重视的责任。
                    <br>
                    感谢您的理解与配合，祝您接单愉快，工作顺利！
                    <br>
                    <text style="color: red;" @click="toAuth">去填写</text>
                </view>
            </view>
        </view>
        <view class="card">
            <view class="card_head flex_b">
                <view class="card_head_l">订单编号</view>
                <view class="card_head_r">{{ orderDetail.id }}</view>
            </view>
            <view class="card_content">
                <view class="card_content_title">订单进度记录</view>
                <view class="step mt24">
                    <view class="step_des">
                        <view class="step_des_icon">
                            <!-- 进行中 -->
                            <image v-if="status == 0" src="@/static/images/workerPage/icon_steps.png" />
                            <!-- 已经打卡 -->
                            <image v-if="status > 0" src="@/static/images/workerPage/icon_steps_2.png" />
                        </view>
                        <view class="step_des_des" style="color: #409EFF;font-weight: normal;" v-if="status == 0"
                            @click="clockIn">点我打卡</view>
                        <template v-else>
                            <view class="step_des_des">到场打卡</view>
                            <view class="step_des_time" v-if="clockNodeInfo.createTime">{{ getTime(clockNodeInfo.createTime) ?? '' }}</view>
                        </template>
                    </view>
                    <view class="step_content" :class="{ 'step_content_active': status > 1 }">{{ clockNodeInfo.signPlace
                        ?? '' }}
                    </view>
                </view>
                <view class="step mt8">
                    <view class="step_des">
                        <view class="step_des_icon" :class="{ 'border': status < 1 }">
                            <!-- 进行中 -->
                            <image v-if="status == 1" src="@/static/images/workerPage/icon_steps.png" />
                            <!-- 已经拍照 -->
                            <image v-else-if="status > 1" src="@/static/images/workerPage/icon_steps_2.png" />
                        </view>
                        <view class="step_des_des">完工拍照</view>
                    </view>
                    <view class="step_content" :class="{ 'step_content_active': status > 2 }">
                        <myUploadImg v-if="status == 1" :max="3" @uploadImgSuccess="uploadImgSuccess"
                            @deleteImg="deleteImg">
                        </myUploadImg>
                        <myUploadImg v-if="status >= 3" :imgList="workNodeImg" disabled preview></myUploadImg>
                    </view>
                </view>
                <view class="step mt8">
                    <view class="step_des">
                        <view class="step_des_icon" :class="{ 'border': status < 2 }">
                            <!-- 进行中 -->
                            <image v-if="status == 3" src="@/static/images/workerPage/icon_steps.png" />
                            <!-- 已经完工 -->
                            <image v-if="status > 3" src="@/static/images/workerPage/icon_steps_2.png" />
                        </view>
                        <!-- 完工申请 显示拍照上传的时间 -->
                        <view class="step_des_des">完工申请</view>
                        <view class="step_des_time" v-if="workNodeInfo.createTime">{{ getTime(workNodeInfo.createTime) ?? '' }}</view>
                    </view>
                    <view class="step_content" v-if="status == 3">已提交完工请求，等待客户确认</view>
                    <view class="step_content" v-if="status > 3">客户已确认完工</view>
                </view>
            </view>
            <view class="card_foot flex_c" v-if="status >= 4">
                <view class="btn flex_c" @click="toComment">去看看客户评价</view>
            </view>
        </view>
    </view>
    <!-- 完工拍照按钮 -->
    <view class="bottom_btn" v-if="status == 1">
        <view class="btn flex_c" @click="finishWork">完成拍照</view>
    </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import myUploadImg from '@/components/my-uploadImg/my-uploadImg.vue';
import { getNewNode, getNewNodePage, workerCheckPhoto, getWorkerCheckPhoto } from '@/api/workerPage/order';
import { getTime } from '@/utils';
import { useOrder } from '@/hooks/useOrder';
import { useMemberStore } from '@/stores'
import { storeToRefs } from 'pinia';
const useMember = useMemberStore()
const { isIdNumber } = storeToRefs(useMember)
const { orderDetail, getWorkerOrderInfo } = useOrder();

const id = ref("")

onLoad((options: any) => {
    id.value = options.id 
})

onShow(() => {
    getWorkerOrderInfo(id.value)
    getNode(id.value)
    getNodePage(id.value)
})

/**
 * 节点
 */
// 获取当前节点 0已接单 1打卡 2拍照 3完工 4评价 5确认 6已取消',
const status = ref<number>(0)
const nodeInfo = ref()

const getNode = (id: string) => {
    getNewNode(id).then((res: any) => {
        if (res.code == 0 && res.data) {
            status.value = res.data.status
            nodeInfo.value = res.data
        }
    })
}
// 获取节点分页
const nodePage = ref([])
const getNodePage = (id: string) => {
    getNewNodePage(id).then((res: any) => {
        if (res.code == 0 && res.data) {
            nodePage.value = res.data.list
            initNodeInfo()
        }
    })
}
const clockNodeInfo = ref<any>({})
const workNodeInfo = ref<any>({})
const initNodeInfo = () => {
    // 打卡信息
    clockNodeInfo.value = nodePage.value.find((item: any) => {
        return item.status == 1
    }) ?? {}
    // 完工拍照
    workNodeInfo.value = nodePage.value.find((item: any) => {
        return item.status == 2
    }) ?? {}
    getWorkNodeImg(workNodeInfo.value.id)
}
// 根据nodeid查询图片
const workNodeImg = ref<string[]>([])
const getWorkNodeImg = async (id: any) => {
    if (id) {
        const res: any = await getWorkerCheckPhoto(id)
        if (res.code == 0 && res.data) {
            workNodeImg.value = res.data.list.map((item: any) => {
                return item.imagePath
            })
        }
    }
}
 // 打卡
const clockIn = () => {
    if(!isIdNumber.value){
        uni.showToast({
            title: '请先完善身份信息',
            icon: 'none'
        })
        return
    }
    uni.navigateTo({ url: `/pages/workerPage/clockIn/clockIn?id=${orderDetail.value.id}&lat=${orderDetail.value.lat}&lng=${orderDetail.value.lng}` })
}

/**
 * 完工拍照
 */
// 拍照上传
const uploadImgSuccess = (url: string) => {
    nodeImageSaveReqVO.value.push({
        imagePath: url
    })
}
// 删除图片
const deleteImg = (index: number) => {
    nodeImageSaveReqVO.value.splice(index, 1)
}
interface NodeImageSaveReqVO {
    // 图片地址
    imagePath: string
}
const nodeImageSaveReqVO = ref<NodeImageSaveReqVO[]>([])
const finishWork = () => {
    if (nodeImageSaveReqVO.value.length == 0) {
        uni.showToast({
            title: '请上传完工图片',
            icon: 'none'
        })
    } else {
        const par = {
            orderId: orderDetail.value.id,
            nodeImageSaveReqVO: nodeImageSaveReqVO.value
        }
        workerCheckPhoto(par).then((res: any) => {
            if (res.code == 0) {
                getNode(orderDetail.value.id as string)
                getNodePage(orderDetail.value.id as string)
            }
        })
    }
}

/** 
 * 其他操作
*/
// 打开地图
const openMap = () => {
    uni.openLocation({
        type: 'gcj02',
        latitude: Number(orderDetail.value?.lat),
        longitude: Number(orderDetail.value?.lng)
    })
}
// 拨打电话
const openPhone = () => {
    uni.makePhoneCall({
        phoneNumber: orderDetail.value.customerMobile
    })
}
// 查看评价
const toComment = () => {
    uni.navigateTo({
        url: '/pages/other/comment/comment?orderId=' + id.value
    })
}
// 填写认证信息
const toAuth = () => {
    uni.navigateTo({
        url: '/pages/mine/auth/auth'
    })
}
</script>

<style lang="scss" scoped>
@import "./myOrder.scss"
</style>